<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no" />
    <script type="text/javascript">
        window.onload=function () {
                document.addEventListener('touchstart',function (event) {
                    if(event.touches.length>1){
                        event.preventDefault();
                    }
                })
                var lastTouchEnd=0;
                document.addEventListener('touchend',function (event) {
                    var now=(new Date()).getTime();
                    if(now-lastTouchEnd<=300){
                        event.preventDefault();
                    }
                    lastTouchEnd=now;
                },false)
            }
    </script>
    <meta charset="UTF-8">
    <title>商品详情页</title>
    <link rel="stylesheet" href="./css/style.min.css">
    <link rel="stylesheet" href="./js/lib/swiper.min.css">
    <style>
        body {
            height: 100%;
            box-sizing: border-box;
        }
        header {
            height: 40px;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            z-index: 90;
        }
        .goods-details-pg {
            padding-top: 80px;
            box-sizing: border-box;
            min-height: 100%;
            
        }
        .wx-fix{
            padding-top: 40px!important;
        }
        .main-body {
            transition: transform 1s;
        }
        .tips {
            color: #999;
            font-size: 12px;
            height: 40px;
            overflow: hidden;
            line-height: 40px;
            text-align: center;
            transition:all .5s;
            opacity: 0;
            filter: alpha(opacity=0);
        }
        .tips-show{
            opacity: 1!important;
            filter: alpha(opacity=100)!important;
            transition:all .5s;
        }
        .detailsShow {
            transform: translateY(0px) translateZ(0px);
            
        }
        .details-content {
            overflow: hidden;
        }
        .details-summary {
            height: auto;
            overflow: hidden;
            transition: all .5s;
        }
        .nav-wrap {
            position: fixed;
            top: 40px;
        }
    </style>
</head>
<body id="body">
    <div id="goods-details-pg" class="goods-details-pg cl" :class="{'wx-fix':!header.show}" v-cloak>
        <header class="cl" v-show="header.show">
            <div class="nav-bar cl">
                <span class="goback arrow_l" @click="goback"></span>
                <span class="page-name" v-cloak>{{goodsdata.goods_name}}</span>
            </div>
        </header>
        <div class="nav-wrap"  :class="{wechat_fix:!header.show}">
                <ul class="nav-tabs cl">
                    <li  :class="{active: activeTab==1}"><a href="#" @click.prevent="switch_des">商品</a></li>
                    <li  :class="{active: activeTab==2}"><a href="#" @click.prevent="switch_detail">详情</a></li>
                    <li  :class="{active: activeTab==3}"><a href="#" @click.prevent="getparams">参数</a></li>
                </ul>
        </div>
        <div class="main-body cl" id="main-body">
        <div class="main details-summary cl" id="details-summary" :class="{hide:tab1_flag}">
            <div class="images-wrap"><!-- 轮播图 -->
            <div class="swiper-container swiper-container-horizontal">
                    <div class="swiper-wrapper">
                            <div class="swiper-slide" v-for="item in goodsdata.img"><img :src="item" ></div>
                    </div>
                    <div class="swiper-pagination img-nav-num  swiper-pagination-fraction"></div>
            </div>
            </div>
            <div class="goods-title-wrap">
                <p class="goods-title cl"><a href="#">{{goodsdata.goods_name}}</a></p>
                <p class="goods-fea cl">{{goodsdata.sale_point}}</p>
                <!-- <p class="goods-label cl">
                    <span v-for="itab in goodsdata.tab" :key="Math.random()">{{itab}}</span>
                </p> -->
                <p class="goods-price"><em>￥</em><span v-cloak>{{sku_price}}</span></p>
            </div>
            <div class="goods-props">
                <props-row ref="proprow" :sku="goodsdata.goodsSku" v-on:pass_sku_id="get_skuid"></props-row>
                <spinner v-on:spinner_val="get_spinner_val"></spinner>
                <div class="pre-sell-wrap cl" v-show="stockData&&stockData.data&&stockData.data.is_presell==1" ><label class="lbl">预售商品</label><span>该商品属于预售商品，付款后预计<em>{{stockData&&stockData.data&&stockData.data.presell_day}}</em>天后发货</span></div>
            </div>
            <div class="buyer-area-wrap" v-if="goodsdata.source==1" @click="hidefn">
                <label>配送至：</label><span class="buyer-area" >{{selected_regions_show}}</span><span class="stock-flag-yes" v-if="stock_show">{{stockstatus?"有货":"库存不足"}}</span>
            </div>
            <p class="tips" id="tips" :class="{'tips-show':moveUpDist>80}">{{moveUpDist>200?'松开':'上拉'}}跳转到图文详情...</p><!--  -->
<!--             <div class="goods-list cl">
                <ul class="cl">
                    <li v-for="goods in goodsrecom">
                    <a href="#" @click.prevent="{goods_link(goods.goods_id)}">
                        <div class="list-img-wrap">
                            <img :src="goods.goods_img1" >
                        </div>
                        <p class="list-title">{{goods.goods_name}}</p>
                        <p class="list-price"><em>￥</em>{{goods.price}}</p>
                        </a>
                    </li>
                </ul>
            </div> -->
        </div>
        <div class="popup" :class="{hide:pop_hide}">
            <div class="pop-main">
                <regions-pop v-on:select_event="selectedcallback" ></regions-pop>
            </div>
            <div class="layer" @click="hidefn"></div>
        </div>
        <div class="main details-content detailsShow cl" id="details-content" :class="{hide:tab2_flag}" v-if="!tab2_flag" v-html="goodsdata.goods_descript">
        </div>
        <div class="main details-parms" id="details-parms" :class="{hide:tab3_flag}">
              <div class="parms-wrap" v-for="param in goodsparams" :key="Math.random()">
                <table>
                 <colgroup>
                    <col width="30%">
                    <col width= 70%>
                 </colgroup>
                    <thead>
                        <tr>
                            <th colspan="2">{{param.param_name}}</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr v-for="item in param.secParam">
                            <td>{{item.param_name}}</td>
                            <td>{{item.paramValue}}</td>
                        </tr>
                    </tbody>
                </table>
            </div>
            <div class="placebox"></div>
        </div>
        </div>
        <div class="btm-cart">
            <div class="buy-func">
                <div class="service" v-if="isAndroid"><h6  @click="toggleQQpanel">客服</h6></div>
                <div class="favorite" :class="{active:isfollow}">
                    <h6 @click="follow_goods" v-if="!isfollow">关注</h6>
                    <h6 v-else @click="unfollow">已关注</h6>
                </div>
                <div class="cart" @click="gotocart"><h6>购物车</h6><span class="counts" v-if="cart_counts>0">{{cart_counts}}</span></div>
            </div>
            <div class="buy-actions">
                <div class="add-cart"><h3 @click="addcart">加入购物车</h3></div>
            <div class="btn-buy"><h3 @click="buynow">立即购买</h3></div>
            </div>
            
        </div>
        <toast ref="toast"></toast>
        <service-qq v-on:togglepanel="toggleQQpanel" :service-show="servicepanel"></service-qq>
        <div class="placebox"></div>
    </div>
<script type="text/template" id="props-row">
    <div class="props-row">
        <div class="attr-row cl">
            <label class="labelcl">已选</label>
            <div class="chesen-wrap">
            <span v-for="attr in attrchked" v-if="attr" :key="Math.random()" class="props-choosen-item">{{attr}}</span>
            </div>
        </div>
        <div class="propsrow-wrap" v-for="(item,i) in sku"  :key="Math.random()">
            <p class="attr-lbl">{{item.attr_name}}</p>
            <p class="attr-val cl"><label v-for="(prop,j) in item.attributevalue"   :data-attrid="prop.id" :class="{active:cpued_class(prop.id)}" :key="Math.random()">
                        <input type="radio" :value="prop.id" :name="item.id" @change="selectfn(i,j,item.id,prop.id)" >{{prop.attr_value}}
                </label>
            </p>
        </div>
    </div>
</script>
<script type="text/template" id="service-qq">
    <div class="service-qq" v-show="serviceShow">
        <p class="service-qq-bg" @click="toggleqq"></p>
        <div class="service-qq-content">
            <ul class="cl">
                <li v-for="qq in qqs">
                <i class="ico-wrap"></i>
                <div class="right-wrap">
                <a href="#"  :id="qq.qq">{{qq.qq}}</a>
                <!-- <button type="button" class="btn-copy"  @click="copyqq(qq.qq)">复制</button> -->
                </div>
                </li>
                <li v-show="qqs.length==0" > 
                    <i class="ico-wrap"></i>
                    <div class="right-wrap">
                    <a href="#" >暂无客服 </a>
                    </div>
                </li>
            </ul>
        </div>
    </div>

</script>
    <script type="text/template" id="spinner">
        <div class="goods-spinner cl">
            <span class="lbl">数量</span>
            <div class="combox">
                <button type="button" class="first" @click="cut"><i class="cut"></i></button>
                <input type="text" v-model="num" @blur="countsblur">
                <button type="button" class="last" @click="add"><i class="add"></i></button>
            </div>
            
        </div>
    </script>
        <script type="text/template" id="regions-pop">
        <div class="regions-pop" :class="{wechat_fix:show}">
            <div class="region-title">
                <ul class="cl">
                    <li :class="{active:title_idx==0}"><a href="#" @click.prevent="change_regions(0)">{{area_selected.province}}</a></li>
                    <li :class="{active:title_idx==1}"><a href="#" @click.prevent="change_regions(1)">{{area_selected.city}}</a></li>
                    <li :class="{active:title_idx==2}"><a href="#" @click.prevent="change_regions(2)">{{area_selected.district}}</a></li>
                </ul>
            </div>
            <div class="regions-list">
                <ul v-if="title_idx==0">
                    <li v-for="area in provinces" :key="Math.random()"><a href="#" @click.prevent="pro_selectfn(0,area.parent_id,area.region_id,area.region_name)" >{{area.region_name}}</a></li>
                </ul>
                <ul  v-if="title_idx==1">
                    <li v-for="city in citys" :key="Math.random()"><a href="#" @click.prevent="city_selectfn(title_idx,city.parent_id,city.region_id,city.region_name)" >{{city.region_name}}</a></li>
                </ul>
                <ul  v-if="title_idx==2">
                    <li v-for="area in districts" :key="Math.random()"><a href="#" @click.prevent="district_selectfn(title_idx,area.parent_id,area.region_id,area.region_name)" >{{area.region_name}}</a></li>
                </ul>
            </div>
        </div>
    </script>
    <script src="./js/lib/vue.js"></script>
    <script src="http://static.jdhui.com/lib/vue-resource/1.2/vue-resource.js"></script>
    <script src="./js/min/config.min.js"></script>
    <script type="text/javascript" src="./js/min/common.min.js"></script>
    <script src="./js/min/component.min.js"></script>
    <script src="./js/lib/swiper.min.js"></script>
    <script src="./js/lib/jroll.min.js"></script>
    <script src="./js/lib/jroll-pulldown.1.0.0.min.js"></script>
    <script src="./js/lib/inobounce.min.js"></script>
    <script src="http://js.jdhui.com/common/weixin.js"></script>
    <script>

    var store_id=APP.getQueryString("storeid");
    var pro_id=APP.getQueryString("id");
    var toast = new component.popup.toast();
    var _title=document.getElementsByTagName('title')
    var area_id=decodeURIComponent(APP.getCookie("area_ids"));
    var area_addr=decodeURIComponent(APP.getCookie("area_addr"));
    //var area_userid = APP.getCookie("area_userid");
//以上是swiper组件的方法
var funTransitionHeight = function(elementId, time) { // time, 数值，可缺省
    var element=document.getElementById(elementId);
    if (typeof window.getComputedStyle == "undefined") return;
    var height = window.getComputedStyle(element).height;
    element.style.transition = "none"; 
    element.style.height = "auto";
    var targetHeight = window.getComputedStyle(element).height;
    element.style.height = height;
    element.offsetWidth = element.offsetWidth;
    if (time) element.style.transition = "height "+ time +"ms";
    element.style.height = targetHeight;
};
    Vue.component("props-row", {
        template: "#props-row",
        props:['sku'],
        data: function() {
            return {
                attrchked:[],
                attrchked_id:[],
                attr_str:"",
                attr_len:0
            }
        },
        mounted: function () {
            
        },
        methods: {
            selectfn: function(m,n,itemid,propid) {
                console.log(m+":"+n+":"+itemid+":"+propid)
                console.log(this.sku)
                    this.$set(this.attrchked, m, this.sku[m].attributevalue[n].attr_value);
                    this.$set(this.attrchked_id, m, this.sku[m].attributevalue[n].id);
                    this.attr_str=this.attrchked_id.join(",")
                    this.attr_len=0;
                    for (var i = 0; i < this.attrchked_id.length; i++) {
                        if(this.attrchked_id[i]){
                                this.attr_len++
                            }
                    }
                    // var len=this.attrchked_id.length
                    var len= this.attr_len;
                    this.$emit("pass_sku_id",this.attr_str,len);
                        
            },
            set_default: function () {
                var that=this;
                if (that.sku&&that.sku.length>0) {
                   for (var i = 0; i <  that.sku.length; i++) {
                    that.$set(that.attrchked, i, that.sku[i].attributevalue[0].attr_value);
                    that.$set(that.attrchked_id, i, that.sku[i].attributevalue[0].id);
                    }
                    that.attr_str=that.attrchked_id.join(",")
                    var len=that.attrchked_id.length
                    that.$emit("pass_sku_id",that.attr_str,len); 
                    goodsdetail.isLoaded=true;
                }
                
            },
            cpued_class:function(m){
                if (this.attrchked_id.indexOf(m)>=0) {
                    return true;
                }
            }
        }
    });
    Vue.component("spinner", {
        template: "#spinner",
        data: function() {
            return {
                num: 1
            }
        },
        mounted: function () {
          this.$emit("spinner_val",this.num)
        },
        methods: {
            cut: function() {
                if (this.num > 1) {
                    this.num--;
                    this.$emit("spinner_val",this.num)
                } else {
                    goodsdetail.$refs.toast.show("数量不能小于1");
                }
            },
            add: function() {
                if (this.num>9999) {
                    goodsdetail.$refs.toast.show("数量不能大于9999");
                    return false;
                }else{
                this.num++;
                this.$emit("spinner_val",this.num);
                }
            },
            countsblur: function () {
                var reg_counts=/^[1-9]\d*|0$/;
                if (this.num<1||!reg_counts.test(this.num)||this.num>9999||isNaN(this.num)) {
                    goodsdetail.$refs.toast.show("请输入有效数量");
                    this.num=1;
                }else {
                    this.$emit("spinner_val",this.num)
                }
            }
        }
    })
 Vue.component("regions-pop", {
        template: "#regions-pop",
        data: function () {
            return {
                data_package:"",
                regions:[],
                show: APP.iswechat(),
                area_selected:{
                    province:"请选择",
                    city:"请选择",
                    district:"请选择"
                },
                area_selected_id:{
                    proid:"",
                    cityid:"",
                    disid:""
                },
                provinces:"",
                citys:"",
                districts:"",
                title_idx:0

            }
        },
        mounted: function () {
            if (area_id) {
                this.area_selected_id=area_id.split(",")
            }
            var that=this;
            Vue.http.post(PHPHOST+'api/common/region/index', {

            }, {
                emulateJSON: true
            }).then(function(_res) {
                that.data_package=_res.body.data;
                that.regions = that.data_package;
                that.provinces=_res.body.data;
            })
        },
        methods: {
            /*selectfn: function (parentid,regionid,regionname) {
                console.log(parentid+":"+regionid+":"+regionname)
                if (parentid==0) {
                    this.title_idx =1;
                    this.$set(this.area_selected,0,regionname);
                    this.$set(this.area_selected_id,0,regionid);
                }
                for (var i = 0; i < this.regions.length; i++) {
                    if(this.regions[i].children.length>0&&parentid!=0){
                        this.$set(this.area_selected,1,regionname);
                        this.$set(this.area_selected_id,1,regionid);
                        this.title_idx =2;
                    } 
                    if(this.regions[i].children.length<=0&&this.regions[i].region_id==regionid){
                        this.$set(this.area_selected,2,regionname);
                        this.$set(this.area_selected_id,2,regionid);
                        this.$emit("select_event",this.area_selected_id.join(","),this.area_selected.join(""))
                    }
                    if (this.regions[i].region_id==regionid&&this.regions[i].children.length>0) {
                        this.regions=this.regions[i].children;
                        if (parentid==1) {
                            this.citys=this.regions;
                        }else{
                            this.districs=this.regions;
                        }
                    }
                }
            },*/
            pro_selectfn:function(title_idx,parentid,regionid,regionname){
                if (title_idx==0) {
                    this.area_selected.province=regionname;
                    this.area_selected_id.proid=regionid;
                    this.title_idx =1;
                }
                for (var i = 0; i < this.regions.length; i++) {
                    if (this.regions[i].region_id==regionid) {
                        this.citys=this.regions[i].children;
                        break;
                    }
                    
                }
                console.log(title_idx,parentid,regionid,regionname)
            },
            city_selectfn:function(title_idx,parentid,regionid,regionname){
                if (title_idx==1) {
                    this.area_selected.city=regionname;
                    this.area_selected_id.cityid=regionid;
                    this.title_idx =2;
                }
                for (var i = 0; i < this.citys.length; i++) {
                    if (this.citys[i].region_id==regionid) {
                        this.districts=this.citys[i].children;
                        break;
                    }
                    
                }
                this.area_selected.district="请选择";
                    this.area_selected_id.disid="";
            },
            district_selectfn:function(title_idx,parentid,regionid,regionname){
                if (title_idx==2) {
                    this.area_selected.district=regionname;
                    this.area_selected_id.disid=regionid;
                    this.title_idx =2;
                    var area_ids_str=this.area_selected_id.proid+","+this.area_selected_id.cityid+","+this.area_selected_id.disid;
                    var area_str=this.area_selected.province+this.area_selected.city+this.area_selected.district;
                    this.$emit("select_event",area_ids_str,area_str)
                }
            },
            change_regions: function (index) {
                if (index==0) {
                    this.regions=this.provinces;
                    this.title_idx=0;
                    this.area_selected[1]="请选择";
                    this.area_selected[2]="请选择";
                }
                if (index==1) {
                    this.title_idx=1;
                    this.regions=this.citys;
                    this.area_selected[2]="请选择";
                }
                if (index==2) {
                    this.title_idx=2;
                    this.regions=this.districs;
                }
            }
        }

    })
Vue.component("service-qq",{
    'template':'#service-qq',
    data:function(){
        return {
            qqs:""
        }
    },
    props:['service-show'],
    mounted:function(){
        var that=this;
        Vue.http.get(PHPHOST+'apic/web/index.php?r=goods/index/kefu-qq&storeid='+store_id).then(function(_res){
            if (_res.body.error_code==0) {
                that.qqs=_res.body.data;
            }else{
                that.qqs=[];
            }
        })
    },
    methods:{
        toggleqq:function(){
            this.$emit("togglepanel")
        },
        copyqq:function(m){
            var _urltxt=document.getElementById(m)
            if (document.selection) {
                var range = document.body.createTextRange();
                range.moveToElementText(document.getElementById('copy'));
                range.select();
            }else {
                var range = document.createRange();  
                range.selectNode(_urltxt);
                window.getSelection().addRange(range);
            }
            try {  
              var successful = document.execCommand('copy');
              var msg = successful ? 'successful' : 'unsuccessful'; 
              goodsdetail.$refs.toast.show('复制成功');
            } catch(err) {  
              // console.log('Oops, unable to copy'); 
              goodsdetail.$refs.toast.show('复制失败，请手动复制');
            }

            window.getSelection().removeAllRanges();
            // window.location.href='http://wpa.qq.com/msgrd?v=3&uin='+m+'&site=qq&menu=yes'
        }
    }
})
    var goodsdetail = new Vue({
        el: "#goods-details-pg",
        created: function() {
          // window.addEventListener('scroll', this.handleScroll); 
          // window.addEventListener('touchend', this.handleScroll); 
          document.body.addEventListener('touchstart', this.handleDown); 
          document.body.addEventListener('touchend', this.handleUp); 
          document.body.addEventListener('touchend', this.handleCancel); 
          document.body.addEventListener('touchmove', this.handleMove);
          document.body.addEventListener('touchcancel', this.handleUp);
        },
        destroyed: function() {
          // window.removeEventListener('touchstart', this.handleDown);
          // window.removeEventListener('touchend', this.handleUp);
        },
        mounted: function () {
        	var that = this;
            Vue.http.get(APIPHP+'index.php?r=goods/index/goodsinfo&storeid='+store_id+'&id='+pro_id).then(function(_res) {
                    if (_res.body.error_code==400) {
                    goodsdetail.$refs.toast.show(_res.body.msg);
                    setTimeout(function () {
                        window.location.href="nogoods.html?storeid="+store_id;
                    },1000)
                    } else {
                    goodsdetail.goodsdata=_res.body.data;
                    goodsdetail.goodsparams=goodsdetail.goodsdata.goods_params_val;
                    /****是否有缓存地址或者默认地址，有则校验库存****/
                    var _defaultAddr = _res.body.data.addr;
                    console.log(area_id.client_id, _res.body.data.client_id);
                    if(_defaultAddr && _defaultAddr.province) {
                    	that.selected_regions_show= _defaultAddr.provinceZW + _defaultAddr.cityZW + _defaultAddr.districtZW;
		                that.province_id = _defaultAddr.province;
		                that.city_id = _defaultAddr.city;
		                that.districs_id = _defaultAddr.district;
                        that.regions_data = _defaultAddr.province + ',' + _defaultAddr.city + ',' + _defaultAddr.district;
		                that.attr_sele_flag = true;
		                that.sku_num = 1;
		                var _skuId = [];
		                _res.body.data.goodsSku.forEach(function(v, k) {
		                	_skuId.push(v.attributevalue[0].id);
		                });
		                that.skuid_str = _skuId.join(',');
		                that.check_stock();
                   // }else if (area_addr && area_userid == _res.body.data.client_id) {
                    }else if (area_addr) {
			                that.selected_regions_show=area_addr;
			                var cookieAddrId = area_id.split(",");
			                that.province_id = cookieAddrId[0];
			                that.city_id = cookieAddrId[1];
			                that.districs_id = cookieAddrId[2];
                            that.regions_data = cookieAddrId[0] + ',' + cookieAddrId[1] + ',' + cookieAddrId[2];
			                that.attr_sele_flag = true;
			                that.sku_num = 1;
			                var _skuId = [];
			                _res.body.data.goodsSku.forEach(function(v, k) {
			                	_skuId.push(v.attributevalue[0].id);
			                });
			                that.skuid_str = _skuId.join(',');
			                that.check_stock();
		            	}
                    }
                    if (_res.body.data.recom) {
                        goodsdetail.goodsrecom=_res.body.data.recom
                    }
                    setTimeout(function(){
                          goodsdetail.$refs.proprow.set_default();
                          
                    },1000)
                    setTimeout(function(){
                    var mySwiper = new Swiper ('.swiper-container', {
                        loop: true,
                        // 如果需要分页器
                        pagination: '.swiper-pagination',
                        paginationType: 'fraction'
                        // 如果需要前进后退按钮
                      })
                    new WeiXin(function() { //微信分享功能
                        var
                        title = goodsdetail.goodsdata.goods_name,
                        desc = goodsdetail.goodsdata.sale_point,
                        link = window.location.protocol + "//" + window.location.host + window.location.pathname + window.location.search,
                        imgUrl =goodsdetail.goodsdata.img[0];

                        wx.onMenuShareAppMessage({
                            title: title,
                            desc: desc,
                            link: link,
                            imgUrl: imgUrl
                        });
                        wx.onMenuShareTimeline({
                            title: title + " - " + desc,
                            link: link,
                            imgUrl: imgUrl
                        });
                    }, {
                        //jsApiList: [],
                        host: "http://www.jdhui.com/api/common/wechat/share-config?shareurl=",
                        status: "error_code",
                        success: 0
                    });

                    },0)
                    
                }, function(_res) {
                    goodsdetail.$refs.toast.show("网络连接失败，请稍候重试");
                });
             Vue.http.get(APIJAVA+'c/mobile/cart/count?shopId='+store_id).then(function(_res) {//获取购物车数量
                    goodsdetail.cart_counts=_res.body.obj;
                }, function(_res) {
                    goodsdetail.$refs.toast.show("网络连接失败，请稍候重试");
                });
             Vue.http.get(APIPHP+'index.php?r=member/mysub/issub&storeid='+store_id+'&id='+pro_id).then(function(_res) {
             if (_res.body.flag==1) {
                goodsdetail.isfollow=true;
             }  else {
                goodsdetail.isfollow=false;
             }
                }, function(_res) {
                    goodsdetail.$refs.toast.show("网络连接失败，请稍候重试");
                });
            APP.init(this,function (){
            this.shop_name = APP.getCookie('shopname');
            }.bind(this), function (arg){
            this.shop_name = arg.body.data.shop.shop_name;
            }.bind(this));
            _title[0].innerText=this.shop_name;
            },
            data: {
            header:{
            show: !APP.iswechat()
            },
            isAndroid:APP.isAndroid(),
            win_href: window.location.href,
            shop_name: '',
            goodsdata:"",
            stockflag: true,
            stock: "",
            goodsrecom:"",
            pop_hide:true,
            regions_data:"",
            // regions_data:"6,76,696",
            selected_regions_show:"请选择",//父组件的收货地区
            tab1_flag:false,
            tab2_flag:true,
            tab3_flag:true,
            goodsparams: "",
            isfollow: false,
            cart_id:"",
            cart_counts:"0",
            skuid_str:"",//选择后的skuid字符串
            attr_sele_flag:false,//属性是否选择完整
            sku_num:"",//欲购买的数量
            sku_price:"",
            cart_skuid:"",
            buyurl:"",
            stockstatus:true, //库存情况,
            stock_val:"",//库存数量
            stock_show:false,
            province_id:"",
            city_id:"",
            districs_id:"",
            imgurl1:"",
            imgurl2:"",
            imgurl3:"",
            imgurl4:"",
            touchStart:0,
            touchEnd:0,
            moveUpDist:0,
            moveDownDist:0,
            activeTab:1,
            bodyScrollHeight:0,
            stockData:{},
            servicepanel:false,
            isLoaded:false
        },
        component: { 
            'toast': toast
        },
        methods: {
            handleDown:function (e) {
                this.touchStart=e.touches[0].pageY;
                this.touchEnd=e.touches[0].pageY;
                this.bodyScrollHeight=document.body.scrollHeight;
            },
            handleMove:function (e) {
                e.stopPropagation();
                if (this.bodyScrollHeight - document.body.scrollTop - window.innerHeight<10) {//滚动条在底部才开始计算距离
                    this.moveDownDist=e.touches[0].pageY-this.touchStart;
                    this.moveUpDist=this.touchStart-e.touches[0].pageY;
                    if (this.activeTab==1&&this.moveUpDist>200) {
                        this.tab2_flag=false;
                        var _detailContent=document.getElementById('details-content');
                        _detailContent.style.height='auto';
                        funTransitionHeight('details-content',500)
                    }else if(this.activeTab==1&&this.moveUpDist<200){
                        this.tab2_flag=true;
                    }
                }
            },
            handleUp: function(e){
               if (this.moveUpDist>200) {
                if (this.activeTab==1) {
                    var _summary=document.getElementById('details-summary');
                    var _summaryHeight=_summary.offsetHeight-parseInt(40);
                    var _mainBody=document.getElementById('main-body');
                    funTransitionHeight('details-summary',500)
                    document.body.scrollTop=this.bodyScrollHeight-parseInt(window.innerHeight);
                    _summary.style.height=0;
                    var tmpTop=document.body.scrollTop;
                    var scrollTimer = setInterval(function () {
                        document.body.scrollTop-=5;
                        if (document.body.scrollTop<=0) {
                            document.body.scrollTop=0;
                            clearInterval(scrollTimer)
                        }
                    },5)
                    this.activeTab=2
                }
                this.moveUpDist=0;
               }else if (this.moveUpDist>100&&this.moveUpDist<200) {
                 setTimeout(function () {
                   this.moveUpDist=0;
                   }.bind(this),1000)  
               }
            },
            handleCancel: function (e) { 
                // if (this.moveUpDist>200) {
                //     if (this.activeTab==1) {
                //         this.tab2_flag=false;
                //         var _summary=document.getElementById('details-summary');
                //         var _summaryHeight=_summary.offsetHeight-parseInt(40);
                //         var _detailContent=document.getElementById('main-body');
                //         _detailContent.style.transform='translateY(-'+_summaryHeight+'px)';
                //         this.activeTab=2
                //     }else if (this.activeTab==2) {
                //         this.tab3_flag=false;
                //         var _summary=document.getElementById('details-summary');
                //         var _summaryHeight=_summary.offsetHeight-parseInt(40);
                //         var _detailContent=document.getElementById('details-content');
                //         var _detailContentHeight=_detailContent.offsetHeight;
                //         var mainOffsetHeight=parseInt(_summaryHeight)+parseInt(_detailContentHeight)
                //         var _mainBody=document.getElementById('main-body');
                //         _mainBody.style.transform='translateY(-'+mainOffsetHeight+'px)';
                //         this.activeTab=3
                //     }
                // }
                // if (this.moveUpDist>100&&this.moveUpDist<200) {
                //   setTimeout(function () {
                //     this.moveUpDist=0;
                //     }.bind(this),1000)  
                // }else if (this.moveUpDist>=200) {
                //     this.moveUpDist=0;
                // }
            },
            goback: function() {
                window.history.go(-1);
            },
            hidefn: function () {
                this.pop_hide=!this.pop_hide;
            },
           
            getparams: function () {
                this.tab1_flag=true,
                this.tab2_flag=true,
                this.tab3_flag=false
                this.activeTab=3;
            },
            switch_des:function () {
                var _summary=document.getElementById('details-summary');
                _summary.style.height='auto';
                this.tab1_flag=false,
                this.tab2_flag=true,
                this.tab3_flag=true
                this.activeTab=1;
                // var _summaryHeight=_summary.offsetHeight-parseInt(40);
                // var _mainBody=document.getElementById('main-body');
                // funTransitionHeight('details-summary',20000)
                

            },
            switch_detail:function () {
                this.tab1_flag=true,
                this.tab2_flag=false,
                this.tab3_flag=true
                this.activeTab=2;
                setTimeout(function(){
                    var ifm=document.getElementsByTagName('iframe');
                    for (var i = 0; i < ifm.length; i++) {
                        ifm[i].setAttribute('height','300')
                        ifm[i].setAttribute('width','100%')
                    }
                })

            },

            toggleQQpanel:function(){
                this.servicepanel=!this.servicepanel;
            },
            follow_goods: function () {
                if (this.isfollow==false) {
                Vue.http.get(APIPHP+'index.php?r=member/mysub/add&storeid='+store_id+'&id='+pro_id).then(function(_res) {
                    if (_res.body.flag==1) {
                        goodsdetail.isfollow=true;
                    }
                        goodsdetail.$refs.toast.show(_res.body.msg);
                   
                }, function(_res) {
                    goodsdetail.$refs.toast.show("网络连接失败，请稍候重试");
                });
                }
            },
            unfollow: function() {
                    var _url = APIPHP + 'index.php?r=member/mysub/cancle&storeid=' + store_id + '&goods_id=' + pro_id;
                    Vue.http.get(_url, {}, {
                        emulateJSON: true
                    }).then(function(_res) {
                        if (_res.body.flag == 1) {
                            goodsdetail.$refs.toast.show(_res.body.msg);
                            goodsdetail.isfollow=!goodsdetail.isfollow;
                        }
                    });
                },
            buynow: function () {
                if (!goodsdetail.isLoaded) {
                    return false;
                }
                if (this.skuid_str=="") {
                    this.$refs.toast.show("请选择完整的属性");
                    return false;
                }
                if (this.regions_data==""&&this.goodsdata.source==1) {
                    this.$refs.toast.show("请选择地址");
                    return false;
                }
                if (this.stockstatus==true&&this.stock_val>=this.sku_num) {
                    var that=this;
                    Vue.http.post(APIJAVA+'c/mobile/order/buyNow?shopId='+store_id,[{
                            "goodsId" : pro_id,
                            "price" : that.goodsdata.min_price,
                            "qty" : that.sku_num,
                            "shopId" : store_id,
                            "skuId" : that.cart_skuid
                        }],{
                            emulateJSON: false
                        }
                        ).then(function(_result) { 
                            if (_result.body.code!=1) {
                                if (_result.body.message) {
                                goodsdetail.$refs.toast.show(_result.body.message);
                                }else{
                                goodsdetail.$refs.toast.show('暂时无法购买')
                                }
                                if (_result.body.code==-100) {
                                   setTimeout(function(){
                                    window.location.href="login.html?storeid="+store_id+"&redirectUrl="+encodeURIComponent(goodsdetail.win_href);
                                },500) 
                                }
                            }else{
                                var cartid=_result.body.obj.cartIds;
                                window.location.href="checkout.html?storeid="+store_id+"&bncartid="+cartid;
                            }
                        
                    }, function(_result) {
                        goodsdetail.$refs.toast.show("网络连接失败，请稍候重试");
                    });
                }else {
                    if (!goodsdetail.isLoaded) {
                        return false;
                    }else{
                       goodsdetail.$refs.toast.show("库存不足"); 
                    }
                    
                }
            },
            addcart: function () {
                if (!goodsdetail.isLoaded) {
                    
                    return false;
                }
                if (this.skuid_str=="") {
                    this.$refs.toast.show("请选择完整的属性");
                    return false;
                }
                if (this.regions_data==""&&this.goodsdata.source==1) {
                    this.$refs.toast.show("请选择地址");
                    return false;
                }
                if (this.stockstatus==true&&(this.stock_val>=this.sku_num)) {
                    var that=this;
                    Vue.http.post(APIJAVA+'c/mobile/cart/add?shopId='+store_id,[{
                        // Vue.http.post('http://order.jdhui.com:8060/jdh_order/c/mobile/order/submit?shopId='+store_id,[{
                            "goodsId" : pro_id,
                            "price" : that.sku_price,
                            "qty" : that.sku_num,
                            "shopId" : store_id,
                            "skuId" : that.cart_skuid
                        }],{
                            emulateJSON: false
                        }
                        ).then(function(_result) {
                        goodsdetail.$refs.toast.show(_result.body.message);
                        if (_result.body.code==1) {
                            that.cart_counts +=parseInt(that.sku_num);
                        }else{
                            if (_result.body.message) {
                            goodsdetail.$refs.toast.show(_result.body.message);
                            }else{
                            goodsdetail.$refs.toast.show("暂时无法添加购物车");
                            }
                        }
                    }, function(_result) {
                        goodsdetail.$refs.toast.show("网络连接失败，请稍候重试");
                    });
               Vue.http.get(APIJAVA+'c/mobile/cart/count?shopId='+store_id).then(function(_res) {//获取购物车数量
               // Vue.http.get('http://order.jdhui.com:8060/jdh_order/c/mobile/cart/count?shopId='+store_id).then(function(_res) {//获取购物车数量
                    goodsdetail.cart_counts=_res.body.obj;
                }, function(_res) {
                    goodsdetail.$refs.toast.show("网络连接失败，请稍候重试");
                });
                }else {
                    goodsdetail.$refs.toast.show("库存不足");
                }
            },
            get_skuid:function (m,n) {
                var data_len=this.goodsdata.goodsSku.length,
                    selected_len=n;
                    if (data_len==selected_len) {//判断是否已经选择完整的sku
                         this.skuid_str=m;
                         this.attr_sele_flag=true;
                         this.get_sku_price();
                         // this.sku_price=999;
                         if (this.goodsdata.source==1&&this.regions_data!=="") { //如果地址已选择，就开始判断库存
                            var tem_region=this.regions_data.split(",");
                            this.province_id=parseInt(tem_region[0]);
                            this.city_id=parseInt(tem_region[1]);
                            this.districs_id=parseInt(tem_region[2]);
                            this.check_stock();
                         }else if (this.goodsdata.source==3){
                            this.check_stock();
                         }
                    }
            },
             selectedcallback: function (m,n) {//地区选择
                var tem_region=m.split(','),
                new_region_id=[];
                if (tem_region.length==3) {
                    this.province_id=parseInt(tem_region[0]);
                    this.city_id=parseInt(tem_region[1]);
                    this.districs_id=parseInt(tem_region[2]);
                }
                for (var i = 0; i < tem_region.length; i++) {
                    new_region_id.push(parseInt(tem_region[i]))
                }
                this.pop_hide=true;
                this.regions_data=new_region_id.join(",");
                var area_val=encodeURIComponent(this.regions_data)
                APP.setCookie("area_ids",area_val,1);
                // APP.setCookie('area_userid', this.goodsdata.client_id);
                APP.setCookie("area_addr",n,1);
                this.selected_regions_show=n;
                this.check_stock();
            },
            get_spinner_val: function (m) {
                this.sku_num=m;
                if (this.goodsdata.source==1&&this.districs_id) {
                this.check_stock(m);
                }
            },
            gotocart: function () {
                if (this.cart_counts==0) {
                    this.$refs.toast.show("购物车为空,先选购一些商品吧");
                }else{
                window.location.href="cart.html?storeid="+store_id+"&version="+APP.version
                }
            },
            goods_link: function (m) {
                window.location.href='goods-detail.html?storeid='+store_id+'&id='+m
            },
             check_stock: function (m) { 
                var that=this;
                var _stockstatus="";
                if (this.attr_sele_flag==true&&this.sku_num>=1) {
                    that.buyurl="";
                    that.buyurl=APIPHP+'index.php?r=goods/index/validate-inventory'+'&id='+pro_id+'&sku='+that.skuid_str+'&qty='+that.sku_num+'&province='+that.province_id+'&city='+that.city_id+'&district='+that.districs_id+'&storeid='+store_id;
                    _url=that.buyurl;
                      Vue.http.get(_url).then(function(_res) {
                        if (_res.body.data.is_presell==1) {
                        that.stock_val=_res.body.data.presell_qty;
                        }else{
                        that.stock_val=_res.body.data.inventory;
                        }
                        that.stockData=_res.body;
                    if (_res.body.error_code==0&&that.stockData.data.skuId) {
                        that.cart_skuid=_res.body.data.skuId;
                        _stockstatus=true;
                        that.stockstatus=true;
                        if(that.districs_id){
                        that.stock_show=true;
                        }
                        return _stockstatus;
                    } else if(_res.body.error_code==405){
                        _stockstatus=false;
                        that.stockstatus=false;
                        if(that.districs_id){
                        that.stock_show=true;
                        }
                        return _stockstatus;
                    } else{
                        goodsdetail.$refs.toast.show(_res.body.msg);
                        _stockstatus=false;
                        that.stockstatus=false;
                        if(that.districs_id){
                        that.stock_show=true;
                        }
                        return _stockstatus;
                    }
                }, function(_res) {
                    goodsdetail.$refs.toast.show("网络连接失败，请稍候重试");
                });
                }
        },
        get_sku_price: function(){
            var that=this;
            Vue.http.get(APIPHP+"index.php?r=goods/index/get-price&id="+pro_id+"&sku="+that.skuid_str+"&storeid="+store_id).then(function(_res){
                if (_res.body.error_code==0) {
                    that.sku_price=_res.body.data.price;
                }else{
                    goodsdetail.$refs.toast.show("查询不到该组合价格");
                }
            },function(){
                goodsdetail.$refs.toast.show("网络连接失败，请稍候重试");
            });
        }
        },
        computed: {
            cpued_stock: function(){
                if (this.stockstatus&&this.regions_data) {
                    return "有货"
                }else{
                    return "库存不足"
                }
            }
           
    }
    })

    </script>
</body>
</html>
